<div data-v-component-plugin-contact-form-form data-v-storage="database" data-v-name="contact-form-1">

  <div class="notifications" data-v-notifications>

    <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error>

      <div class="icon align-middle me-2">
        <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
      </div>

      <div class="flex-grow-1 align-self-center text-small">
        <div>
          <div data-v-notification-text>
            This is a placeholder for a notification message.
          </div>
        </div>
      </div>


      <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">
          <!-- <i class="la la-times"></i> -->
        </span>
      </button>
    </div>

    <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success>

      <div class="icon align-middle me-2">
        <i class="align-middle la la-2x lh-1 la-check-circle"></i>
      </div>

      <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
        This is a placeholder for a success message.
      </div>

      <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">
          <!-- <i class="la la-times"></i> -->
        </span>
      </button>
    </div>

    <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info>

      <div class="icon align-middle me-2">
        <i class="align-middle la la-2x lh-1  la-info-circle"></i>
      </div>

      <div class="flex-grow-1 align-self-center" data-v-notification-text>
        This is a placeholder for a info message.
      </div>

      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">
          <!-- <i class="la la-times"></i> -->
        </span>
      </button>
    </div>

  </div>

  <form action="" method="post">
    <input type="hidden" class="form-control" placeholder="First name" name="firstname-empty">
    <input type="hidden" class="form-control" placeholder="Email" name="csrf" data-v-csrf>

    <div class="row">
      <div class="col">
        <input type="text" class="form-control" placeholder="First name" name="firstname" required>
      </div>
      <div class="col">
        <input type="text" class="form-control" placeholder="Last name" name="lastname" required>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col">
        <input type="email" class="form-control" placeholder="Enter email" name="email" required>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col">
        <input type="text" class="form-control" placeholder="Subject" name="subject" required>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col">
        <textarea class="form-control" name="message" rows="3" placeholder="How can we help?" required></textarea>
      </div>
    </div>


    <!-- if these hidden inputs are filled then ignore, robots -->

    <input type="text" class="form-control d-none" placeholder="Contact form" name="contact-form">

    <input type="text" class="form-control d-none" placeholder="Subject" name="subject-empty">

    <input type="text" class="form-control visually-hidden" placeholder="Last name" name="lastname-empty" tabindex="-1">


    <div class="row mt-4">
      <div class="col">
        <button type="submit" class="btn btn-primary">Submit <i class="la la-long-arrow-alt-right ms-1"></i>
        </button>
      </div>
    </div>
  </form>
</div>